<template>
  <div class="big-child-wrapper">
    <div>我是大儿子</div>
    {{ props.msg }}
    {{ props.thing }}
    <button @click="handleClick">告诉父亲，大儿子收到了</button>
    <button @click="handleToSmall">点击告诉小儿子消息</button>
    <button @click="changeMsg">修改父亲的消息</button>
  </div>
</template>
<script setup>
import { defineProps, defineEmits } from "vue";
// defineProps必须要接受一个参数，这个参数，可以是数组，也可以是对象
// 当他是一个数组的时候，数组内的每一项都需要时一个字符串，这个字符串是我需要传入的属性的名称
// const props = defineProps(["msg", "thing"]);
// 当他是一个对象的时候，他的每一个key都是需要传入的属性，里面可以接受，type，required，default，这三个属性
const props = defineProps({
  msg: {
    type: String,
    required: true,
    default: "123",
  },
});
const emits = defineEmits(["get", "toSmall"]);
const handleClick = () => {
  emits("get", "大儿子收到了");
};
const handleToSmall = () => {
  emits("toSmall", "这是大儿子给小儿子的话");
};
const changeMsg = () => {
  props.msg = "被篡改了";
};
</script>
<style>
.big-child-wrapper {
  padding: 20px;
  border: 1px solid #000;
}
</style>
